<template>
	<div ref="chartCategory" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
	name: 'category',
	props: {
		eventAdvStats: {
			type: Object,
		},
	},
	watch: {
		eventAdvStats: {
			handler(newVal, oldVal) {
				// 这里可以处理变化
				this.updateChart();
			},
			deep: true, // 开启深度监听
		},
	},
	created() {},
	mounted() {
		this.initChart();
	},
	data() {
		return {
			salvProNameList: [
				{
					module: 1,
					name: '首页',
					count: 0,
				},
				{
					module: 2,
					name: '短剧',
					count: 0,
				},
				{
					module: 3,
					name: '小说',
					count: 0,
				},
				{
					module: 4,
					name: '个人中心',
					count: 0,
				},
				{
					module: 5,
					name: '文章',
					count: 0,
				},
				{
					module: 6,
					name: '短视频',
					count: 0,
				},
				{
					module: 7,
					name: '直播',
					count: 0,
				},
				{
					module: 8,
					name: 'AI',
					count: 0,
				},
			],
		};
	},
	methods: {
		initChart() {
			const chartDom = this.$refs.chartCategory;
			this.myChart = this.$echarts.init(chartDom);
			let newFontSize = (window.innerWidth * 0.04) / 6;
			let salvProName = [];
			let salvProValue = [];
			let salvProMax = []; //背景按最大值
			let salvProMaxName = 1;
			for (let salvProItem of this.salvProNameList) {
				for (let item of this.eventAdvStats.moduleClickCount) {
					if (salvProItem.module == item.module) {
						salvProItem.count = item.count;
					}
				}
			}
			this.salvProNameList.sort((a, b) => b.count - a.count);

			for (let salvProItem of this.salvProNameList) {
				salvProValue.push(salvProItem.count);
				salvProName.push(salvProItem.name);
				salvProMax.push(parseInt(this.salvProNameList[0].count) + 1);
			}
			console.log(salvProMax);

			this.option = {
				textStyle: {
					fontSize: newFontSize, // 全局字体大小调整
				},
				backgroundColor: '',
				grid: {
					left: '5%',
					right: '5%',
					bottom: '0%',
					top: '20%',
					containLabel: true,
				},
				tooltip: {
					trigger: 'axis',
					backgroundColor: '#fff',
					border: 'none',
					extraCssText: 'background: linear-gradient(to right, #286CE9, #01D1FF);',
					textStyle: {
						color: '#FFF',
						fontSize: newFontSize, // 全局字体大小调整
					},
					axisPointer: {
						type: 'line',
						label: {
							show: true,
							backgroundColor: '#7B7DDC',
						},
					},
					formatter: function (params) {
						return params[0].name + ' : ' + params[0].value + '次';
					},
				},
				xAxis: {
					show: false,
					type: 'value',
				},
				yAxis: [
					{
						type: 'category',
						inverse: true,
						axisLabel: {
							show: true,
							fontSize: newFontSize,
							textStyle: {
								color: '#fff',
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						data: salvProName,
					},
					{
						type: 'category',
						inverse: true,
						axisTick: 'none',
						axisLine: 'none',
						splitLine: 'none',
						show: true,
						axisLabel: {
							fontSize: newFontSize,
							textStyle: {
								color: '#ffffff',
							},
						},

						data: salvProValue,
						// data: [120, 230, 350, 1400070, 405],
					},
				],
				series: [
					{
						name: '值',
						type: 'bar',
						zlevel: 1,
						itemStyle: {
							normal: {
								borderRadius: 20,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0,
										color: '#2771EA',
									},
									{
										offset: 1,
										color: '#01D1FF',
									},
								]),
							},
						},
						barWidth: newFontSize,
						data: salvProValue,
						// data: [1200, 230, 350, 1470, 405],
					},
					{
						name: '背景',
						type: 'bar',
						barWidth: newFontSize,
						barGap: '-100%',
						data: salvProMax,
						// data: [9999, 9999, 9999, 9999, 9999],
						itemStyle: {
							normal: {
								color: '#00ADEE',
								borderRadius: 20,
								opacity: 0.302,
							},
						},
					},
				],
			};
			this.myChart.setOption(this.option);
			this.$nextTick(() => {
				this.resize(this.myChart, this.option);
			});
		},
		resize(myChart) {
			window.addEventListener('resize', () => {
				let FontSize = (window.innerWidth * 0.04) / 6;
				let newOption = {
					textStyle: {
						fontSize: FontSize, // 应用新的字体大小
					},
					tooltip: {
						textStyle: {
							fontSize: FontSize, // 全局字体大小调整
						},
					},
					xAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					yAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					series: [
						{
							barWidth: FontSize,
						},
						{
							barWidth: FontSize,
						},
					],
				};
				this.option = { ...this.option, ...newOption };
				myChart.setOption(this.option);
				myChart.resize();
			});
		},
		updateChart() {
			let salvProValue = [];
			let salvProMax = [];
			for (let salvProItem of this.salvProNameList) {
				for (let item of this.eventAdvStats.moduleClickCount) {
					if (salvProItem.module == item.module) {
						salvProItem.count = item.count;
					}
				}
				salvProValue.push(salvProItem.count);
			}

			this.option.series[0].data = [...salvProValue];
			for (let salvProItem of this.salvProNameList) {
				salvProMax.push(parseInt(this.salvProNameList[0].count) + 1);
			}
			this.option.series[1].data = salvProMax;
			this.myChart.setOption(this.option);
		},
	},
};
</script>
<style scoped lang="scss">
.mapDom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.echarts {
	display: flex;
	align-items: center;

	.echartsLeft {
		width: auto;
		background-image: linear-gradient((#063053, 0.3), (#395873, 0.3), (#5c7c99.3));
	}

	.echartsRight {
		width: auto;
		background-color: #000;
	}

	.echartsCenter {
		flex: 1;
		background-color: #000;
	}
}
</style>
